import React, {Component} from "react";
import Hello from "./components/Hello";
import Tab from "./components/Tab"

export default class LayOut extends Component{
    constructor(props) {
        super(props)
        this.state = {
            count: 0
        }
    }

    increment = () => {
        this.setState({
            count: ++this.state.count
        })
        // this.setState(() => {
        //     this.state.count++
        //     return {
        //         count: this.state.count
        //     }
        // })
    }

    // componentWillReceiveProps(nextProps) {
    //     console.log("UNSAFE_componentWillReceiveProps   0");
    // }

    shouldComponentUpdate(nextProps, nextState) {
        console.log("shouldComponentUpdate  2" );
        console.log("nextState: ", nextState.count)
        console.log("this.state: ", this.state.count)
        return nextState.count == this.state.count
    }

    componentWillUpdate(nextProps, nextState) {
        console.log("componentWillUpdate:  3", nextState)
    }

    render() {
       const {count} = this.state
        return (
            <div>
                <button onClick={this.increment}>父组件 修改 count</button>
                <div>{count}</div>
                {/* <Hello count={count}></Hello> */}
            </div>
        )
    }

    componentDidUpdate(nextProps, nextState) {
        console.log("componentDidUpdate  4", nextState)
    }
  
}


// export default function LayOut() {
   
//     return(
//         <div>
//           <Hello />
//           <Tab />
//         </div>
//     )
// }